<template>
  <!-- 巡视卡管理-新增 -->
  <div class="addposimans">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="1.5rem">
      <el-row>
        <el-row>
          <el-col :offset="5" :span="14">
            <el-form-item label="变电站名称:" prop="bdzid">
              <el-select v-model="formData.bdzid" filterable placeholder="请选择">
                <el-option
                  v-for="item in bdzmc1"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="5" :span="14">
            <el-form-item label="任务名称:" prop="rwmc">
              <el-input v-model="formData.rwmc" placeholder clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :offset="5" :span="14">
            <el-form-item label="巡检类型:" prop="xjlx">
              <el-select
                v-model="formData.xjlx"
                placeholder="请选择"
                filterable
              >
                <el-option
                  v-for="item in maintancegroup_options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="5" :span="14">
            <el-form-item label="延迟天数:" prop="ycts">
              <el-input
                v-model.number="formData.ycts"
                placeholder
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="5" :span="14">
            <el-form-item label="执行开始时间:" prop="zqkss">
              <el-date-picker
                v-model="formData.zqkssj"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                popper-class="times"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="5" :span="14">
            <el-form-item label="巡检方式:" prop="xsfs">
              <el-select v-model="formData.xsfs" :disabled="PopUpTitle === '编辑'" placeholder="请选择">
                <el-option
                  v-for="item in inspectiontype_options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.xsfs==0 || formData.xsfs==1">
          <el-col :offset="5" :span="14">
            <el-form-item label="机器人ID:" prop="jqrid">
              <el-input v-model="formData.jqrid" placeholder clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.xsfs==0 || formData.xsfs==1">
          <el-col :offset="5" :span="14">
            <el-form-item label="任务ID:" prop="jqrrwid">
              <el-input
                v-model="formData.jqrrwid"
                placeholder
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.xsfs==3">
          <el-col :offset="5" :span="14">
            <el-form-item label="虚拟间隔名称:" prop="hjjcjgmc">
              <el-input
                v-model="formData.hjjcjgmc"
                placeholder
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.xsfs==3">
          <el-col :offset="5" :span="18">
            <el-form-item label="监测名称:">
              <el-checkbox-group v-model="hjjclx">
                <el-checkbox label="环境">环境</el-checkbox>
                <el-checkbox label="消防">消防</el-checkbox>
                <el-checkbox label="安防">安防</el-checkbox>
                <el-checkbox label="温度">温度</el-checkbox>
                <el-checkbox label="湿度">湿度</el-checkbox>
                <el-checkbox label="SF6含量">SF6含量</el-checkbox>
                <el-checkbox label="水侵">水侵</el-checkbox>
                <el-checkbox label="烟感">烟感</el-checkbox>
                <el-checkbox label="烟雾对射">烟雾对射</el-checkbox>
                <el-checkbox label="电子围栏">电子围栏</el-checkbox>
                <el-checkbox label="红外对射">红外对射</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 041001-041002-041012-041004-041011-041003-041009-042009,042011-042001,042002,042003-042008-031001,031002,031003,031004,031005,031006,031007,031008,031009-041005-041006 -->
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <div class="addposiman-btn">
                <el-button class="table-query" type="primary" @click="submitForm">保存</el-button>
                <el-button class="table-query" type="primary" @click="clsoe">关闭</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import { FileLoader } from "three";
@Component
export default class addposiman extends Vue {
  @Prop({
    default: () => {
      return "";
    },
  })
  PopUpTitle: string | undefined;
  @Prop({ default: {} })
  bjsj: any;
  formData = {
    bdzid: "",
    rwmc: "",
    xjlx: "",
    ycts: "",
    zqkssj: "",
    xsfs: "",
    jqrid: "",
    jqrrwid: "",
    hjjcjgmc: "",
  };
  hjjclx: any = [];
  rules = {
    bdzid: [{ required: true, message: "请输入内容", trigger: "blur" }],
    rwmc: [{ required: true, message: "请输入内容", trigger: "blur" }],
    xjlx: [{ required: true, message: "请输入内容", trigger: "blur" }],
    ycts: [
      {
        required: true,
        message: "请输入延迟天数",
        trigger: "blur",
      },
      {
        type: "number",
        min: 0,
        max: 99,
        message: "延迟天数为0-99",
        trigger: "blur",
      },
    ],
    zqkssj: [{ required: true, message: "请输入内容", trigger: "blur" }],
    xsfs: [{ required: true, message: "请输入内容", trigger: "blur" }],
    hjjcjgmc: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // hjjclx: [{ required: true, message: "请输入内容", trigger: "blur" }],
    jqrid: [{ required: true, message: "请输入内容", trigger: "blur" }],
    jqrrwid: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };

  $refs!: {
    elForm: any;
  };

  get bdzmc1() {
    return JointInspectionModule.LocalCityList;
  }
  get maintancegroup_options() {
    return JointInspectionModule.getXslxList;
  }
  get inspectiontype_options() {
    return JointInspectionModule.getXsfsList;
  }
  //创建
  clsoe() {
    this.$emit("close");
  }

  /*环境监测的类型 
  输入：字典+多选的数组
  输出：逗号拼接的字符串
  */
  get hjjclxStr() {
    let jclxDict = JointInspectionModule.jclxData || []; //字典
    console.log(jclxDict);
    let hjjclx = this.hjjclx; //多选框选的中文名字

    let hjjclxArr = []; //参数数组
    let hjjclxStr = ""; //参数
    if (hjjclx.length > 0) {
      hjjclx.map((k) => {
        let acode = jclxDict.filter((o) => o.name == k)[0].code; //有问题
        hjjclxArr.push(acode);
      });
      hjjclxStr = hjjclxArr.join(",");
    }
    console.log(jclxDict, hjjclx);
    return hjjclxStr;
  }

  // 保存按钮
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      // TODO 提交表单
      if (this.PopUpTitle == "新增") {
        var from: any = this.formData;
        var xsfs = this.formData.xsfs;
        (from as any).hjjclx = this.hjjclxStr;
        (this as any).$services
          .taskSave({ data: from, method: "post", postparams: true })
          .then((result: any) => {
            // console.log(result);
            if (result.code == 200) {
              this.$message({
                showClose: true,
                message: result.message,
                type: "success",
              });
              this.$emit("close");
            } else {
              this.$message({
                showClose: true,
                message: result.message,
                type: "warning",
              });
              this.$emit("close");
            }
          })
          .catch((err: any) => {
            console.log(err);
            this.$message({
              showClose: true,
              message: err,
              type: "warning",
            });
            this.$emit("close");
          });
      }
      if (this.PopUpTitle == "编辑") {
        var fd = (this as any).formData;

        (fd as any).id = this.bjsj[0].ID;
        (fd as any).hjjclx = this.hjjclxStr;
        (this as any).$services
          .taskUpdate({ data: fd, method: "post", postparams: true })
          .then((result: any) => {
            if (result.code == 200) {
              this.$message({
                showClose: true,
                message: result.message,
                type: "success",
              });
              this.$emit("close");
            } else {
              this.$message({
                showClose: true,
                message: result.message,
                type: "warning",
              });
              this.$emit("close");
            }
          })
          .catch((err: object) => {
            console.log(err);
            this.$emit("close");
          });
      }
    });
  }
  eidInit() {
    if (this.PopUpTitle == "编辑") {
      // console.log(this.bjsj);
      this.formData.bdzid = this.bjsj[0].BDZID;
      this.formData.rwmc = this.bjsj[0].RWMC;
      this.formData.xjlx = this.bjsj[0].XJLX;
      this.formData.ycts = this.bjsj[0].YCTS;
      this.formData.zqkssj = this.bjsj[0].ZQKSSJ;
      this.formData.xsfs = this.bjsj[0].XSFS;
      this.formData.jqrid = this.bjsj[0].JQRID;
      this.formData.jqrrwid = this.bjsj[0].JQR_RWID;
      this.formData.hjjcjgmc = this.bjsj[0].HJJCJGMC;
      let hjjclxOld = this.bjsj[0].HJJCLX;
      if (hjjclxOld) {
        let hjjclx = [];
        hjjclxOld = hjjclxOld.split(",");
        let jclxDict = JointInspectionModule.jclxData || []; //字典
        jclxDict.forEach((item) => {
          hjjclxOld.forEach((v) => {
            if (item.code.indexOf(v) >= 0) {
              hjjclx.push(item.name);
            }
          });
        });
        this.hjjclx = hjjclx;
      } else {
        this.hjjclx = [];
      }
      // console.log(this.formData);
    } else {
      (this as any).formData = {};
    }
  }
  mounted() {
    this.eidInit();
  }
}
</script>

<style lang="scss" scoped>
.addposimans {
  .el-select {
    width: 100%;
  }

  width: 100%;
  // height: 400px;
  .addposiman-btn {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .table-query {
      margin: 0 0.4rem;
    }
  }
}
</style>
<style lang="scss" >
.addposimans {
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}
</style>